<template>
  <div class="div-max">
    <div class="footer_wrap">
      <div class="finance-2">
        <div>金融WEB</div>
        <div>值得信赖的投资理财平台</div>
      </div>
      <router-link to="/login" class="finance_size">
        已有账号，立即登录
      </router-link>
    </div>
    <div class="finance-3">
      <div class="u3690_text">
        <p>
          <span> 注册金融WEB账号 </span>
        </p>
      </div>

      <div class="finance-4">
        <el-form ref="form" :rules="rules" :model="form">
          <div class="grid-content bg-purple">
           <el-form-item
              prop="user_phone"
              class="pr"
              :rules="[
                {
                  pattern: /^1[3456789]\d{9}$/,
                  message: '请输入有效的手机号码!',
                  trigger: 'change',
                },
              ]"
            >
              <el-input
                v-model="form.user_phone"
                placeholder="手机号"
                prefix-icon="el-icon-user"
                clearable
              ></el-input>
            </el-form-item>
          </div>
          <div class="grid-content bg-purple">
            <el-form-item
              prop="user_pwd"
              class="pr"
              :rules="[
                {
                  pattern: /^(\w){6,18}$/,
                  message: '只能输入6-18个字母、数字、下划线!',
                  trigger: 'change',
                },
              ]"
            >
              <el-input
                placeholder="设置6-18位登录密码"
                v-model="form.user_pwd"
                prefix-icon="el-icon-lock"
                show-password
              ></el-input>
            </el-form-item>
          </div>
          <div class="grid-content bg-purple">
            <el-form-item prop="phoneCode" class="pr">
              <el-input
                v-model="code"
                placeholder="短信验证码"
                prefix-icon="el-icon-user"
                style="width: 72%"
                clearable
              ></el-input
              >&nbsp;&nbsp;&nbsp;
              <button
                @click.prevent="getShortMessageCode()"
                :class="{ code_btn: ppt, code_btn1: !ppt }"
                :disabled="!show"
              >
                <span v-show="show">获取验证码</span>
                <span v-show="!show">{{ count }} 秒后可重发</span>
              </button>
            </el-form-item>
          </div>
        </el-form>
        <div class="div-button">
          <el-button type="danger" @click="submitForm()" style="width: 100%"
            >立即注册</el-button
          >
        </div>
        <div class="login-yes">
          <el-checkbox v-model="checked">
            我已阅读并同意 &nbsp;&nbsp;&nbsp;<a href="">
              《用户隐私政策》
            </a></el-checkbox
          >
        </div>
      </div>
    </div>

    <Bottom />
  </div>
</template>

<script>
import Bottom from "./finance/Bottom.vue";
import axios from "axios";
export default {
  data() {
    return {
      form: {
        user_phone: "",
        user_pwd: "",
      },
      code: "",
      checked: false,
      show: true,
      timer: 0,
      count: 0,
      ppt: true, //点击时改变样式
    };
  },
  components: {
    Bottom,
  },
  methods: {
    // 获取短信验证码
    getShortMessageCode() {
      this.ppt = !this.ppt;
      axios({
        url: "/api/user/smsverification",
        params: {
          phone: this.form.user_phone,
        },
      });
      // 验证码倒计时
      if (!this.timer) {
        console.log(this.timer);
        this.count = 60;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            this.ppt = !this.ppt;
          }
        }, 1000);
      }
    },

    //立即注册
    submitForm() {
      if (this.checked === false) {
        this.$message({
          type: "warning",
          message: "请同意服务条款",
        });
        return;
      } else {
        axios({
          url: "api/user/registeredUser",
          method: "POST",
          params: {
            user_phone: this.form.user_phone,
            user_pwd: this.form.user_pwd,
            code: this.code,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.message,
            });
          } else {
            this.$message({
              type: "warning",
              message: res.data.message,
            });
            return;
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.finance-2 {
  float: left;
  /* background-color: rgb(43, 210, 49); */
  margin-top: 17px;
  margin-left: 28%;
}
.finance-2 div:nth-child(1) {
  font-size: 190%;
  color: red;
  font-weight: bold;
}
.finance-2 div:nth-child(2) {
  font-size: 90%;
}
.finance_size {
  font-size: 100%;
  margin-left: 400px;
  line-height: 100px;
  float: left;
}
.top {
  padding-top: 62px;
}
.footer_wrap {
  /* position: fixed; */
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
  float: left;
}

.footer_wrap .router-link-active {
  color: red;
}
.div-max {
  background-color: #f6f6f6;
  float: left;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.code_btn {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid red;
  background-color: red;
  -webkit-border-radius: 5px;
}
.code_btn1 {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid #cccccc;
  background-color: #cccccc;
  -webkit-border-radius: 5px;
}
a {
  text-decoration: none; /* 去除默认的下划线 */
  color: #17acf7;
}

.div-p {
  position: absolute;
  float: left;
  transform: translate(650%, -90%);
}
.finance-3 {
  width: 1120px;
  height: 600px;
  margin-top: 130px;
  margin-left: 195px;
  margin-bottom: 50px;
  background-color: white;
  float: left;
}
.u3690_text {
  border-width: 0px;
  position: absolute;
  left: 620px;
  top: 330px;
  width: 250px;
  height: 30px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  color: red;
}
.finance-4 {
  position: absolute;
  width: 386px;
  height: 290px;
  left: 580px;
  top: 420px;
  background-color: transparent;
}
.div-password {
  margin-top: 43.5px;
}
.div-yzm {
  margin-top: 43.5px;
}
.div-button {
  margin-top: 43.5px;
}
.div-hqyzm {
  position: absolute;
  left: 70%;
  top: 57.6%;
}
.login-yes {
  position: absolute;
  margin-top: 20px;
  top: 90.6%;
}
</style>